import { Flex } from "antd"
import { createStyles } from "antd-style"
import { memo } from "react"
import { useTranslation } from "react-i18next"

const Logo = (
	<svg
		xmlns="http://www.w3.org/2000/svg"
		width="200"
		height="200"
		viewBox="0 0 200 200"
		fill="none"
	>
		<path
			d="M116.912 142.984L132.135 141.505V124.328H138.167V141.505L153.447 143.005C154.179 143.077 154.858 143.418 155.351 143.963C155.845 144.508 156.119 145.217 156.12 145.952V148.239H114.219V145.952C114.214 145.21 114.489 144.493 114.987 143.943C115.486 143.394 116.173 143.051 116.912 142.984Z"
			fill="#263238"
		/>
		<path
			opacity="0.1"
			d="M116.912 142.984L132.135 141.505V124.328H138.167V141.505L153.447 143.005C154.179 143.077 154.858 143.418 155.351 143.963C155.845 144.508 156.119 145.217 156.12 145.952V148.239H114.219V145.952C114.214 145.21 114.489 144.493 114.987 143.943C115.486 143.394 116.173 143.051 116.912 142.984Z"
			fill="white"
		/>
		<path
			d="M154.509 155C156.688 155 158.454 153.233 158.454 151.054C158.454 148.875 156.688 147.109 154.509 147.109C152.33 147.109 150.563 148.875 150.563 151.054C150.563 153.233 152.33 155 154.509 155Z"
			fill="#263238"
		/>
		<path
			d="M115.851 155C118.03 155 119.796 153.233 119.796 151.054C119.796 148.875 118.03 147.109 115.851 147.109C113.672 147.109 111.905 148.875 111.905 151.054C111.905 153.233 113.672 155 115.851 155Z"
			fill="#263238"
		/>
		<path
			d="M137.02 128.923H133.276C132.697 128.923 132.142 128.694 131.733 128.284C131.324 127.875 131.094 127.32 131.094 126.742V109.877H139.175V126.737C139.177 127.312 138.951 127.864 138.548 128.273C138.144 128.683 137.595 128.916 137.02 128.923Z"
			fill="#263238"
		/>
		<path
			opacity="0.2"
			d="M137.02 128.923H133.276C132.697 128.923 132.142 128.694 131.733 128.284C131.324 127.875 131.094 127.32 131.094 126.742V109.877H139.175V126.737C139.177 127.312 138.951 127.864 138.548 128.273C138.144 128.683 137.595 128.916 137.02 128.923Z"
			fill="white"
		/>
		<path
			d="M114.087 76.8076C114.087 76.8076 118.603 105.018 127.518 109.872H118.444C118.444 109.872 109.465 100.264 106.761 76.8076H114.087Z"
			fill="#263238"
		/>
		<path
			opacity="0.1"
			d="M114.087 76.8076C114.087 76.8076 118.603 105.018 127.518 109.872H118.444C118.444 109.872 109.465 100.264 106.761 76.8076H114.087Z"
			fill="white"
		/>
		<path
			d="M118.011 105.884H153.357C154.058 105.884 154.729 106.162 155.225 106.657C155.72 107.153 155.998 107.824 155.998 108.525V112.058H115.37V108.525C115.37 107.824 115.648 107.153 116.144 106.657C116.639 106.162 117.311 105.884 118.011 105.884Z"
			fill="#315CEC"
		/>
		<path
			d="M105.699 82.5382H120.224C124.45 82.5382 127.244 79.1261 126.393 74.9165L125.268 69.3019C124.423 65.0764 120.288 61.6802 116.036 61.6802H101.511C97.2587 61.6802 94.491 65.0923 95.3414 69.3019L96.4664 74.9165C97.3168 79.1261 101.447 82.5382 105.699 82.5382Z"
			fill="#315CEC"
		/>
		<path
			opacity="0.2"
			d="M118.011 105.884H153.357C154.058 105.884 154.729 106.162 155.225 106.657C155.72 107.153 155.998 107.824 155.998 108.525V112.058H115.37V108.525C115.37 107.824 115.648 107.153 116.144 106.657C116.639 106.162 117.311 105.884 118.011 105.884Z"
			fill="white"
		/>
		<path
			opacity="0.2"
			d="M105.699 82.5382H120.224C124.45 82.5382 127.244 79.1261 126.393 74.9165L125.268 69.3019C124.423 65.0764 120.288 61.6802 116.036 61.6802H101.511C97.2587 61.6802 94.491 65.0923 95.3414 69.3019L96.4664 74.9165C97.3168 79.1261 101.447 82.5382 105.699 82.5382Z"
			fill="white"
		/>
		<path
			d="M156.627 108.974H114.736C114.15 108.974 113.675 109.449 113.675 110.035V110.997C113.675 111.583 114.15 112.058 114.736 112.058H156.627C157.213 112.058 157.688 111.583 157.688 110.997V110.035C157.688 109.449 157.213 108.974 156.627 108.974Z"
			fill="#263238"
		/>
		<path
			opacity="0.6"
			d="M156.627 108.974H114.736C114.15 108.974 113.675 109.449 113.675 110.035V110.997C113.675 111.583 114.15 112.058 114.736 112.058H156.627C157.213 112.058 157.688 111.583 157.688 110.997V110.035C157.688 109.449 157.213 108.974 156.627 108.974Z"
			fill="white"
		/>
		<path
			d="M71.7791 73.5592L72.2122 71.9165H90.0384L98.2464 72.7405L98.558 73.5592H71.7791Z"
			fill="#263238"
		/>
		<path
			opacity="0.4"
			d="M90.0384 71.9165V73.5592H71.7791L72.2122 71.9165H90.0384Z"
			fill="black"
		/>
		<path
			d="M86.4573 64.0677C86.4831 64.2676 86.4656 64.4707 86.4059 64.6632C86.3463 64.8558 86.2459 65.0332 86.1117 65.1835C85.9774 65.3338 85.8124 65.4535 85.6278 65.5343C85.4431 65.6152 85.2433 65.6555 85.0418 65.6523H57.7346C57.3047 65.6439 56.8929 65.4779 56.5774 65.1857C56.2619 64.8936 56.0647 64.4957 56.0233 64.0677L54.4018 46.5848C54.3802 46.4083 54.3909 46.2293 54.4335 46.0566C54.511 45.7501 54.6899 45.4789 54.9412 45.2871C55.1925 45.0953 55.5013 44.9942 55.8173 45.0003H83.1245C83.5544 45.0086 83.9662 45.1747 84.2817 45.4668C84.5973 45.7589 84.7944 46.1568 84.8358 46.5848L86.4573 64.0677Z"
			fill="#263238"
		/>
		<path
			opacity="0.4"
			d="M84.9467 65.6367H57.7346C57.3047 65.6283 56.8929 65.4623 56.5774 65.1701C56.2619 64.878 56.0647 64.4801 56.0233 64.0521L54.4018 46.5692C54.3802 46.3927 54.3909 46.2137 54.4335 46.041H81.6456C82.0751 46.0505 82.4863 46.2169 82.8016 46.5089C83.1169 46.8008 83.3144 47.198 83.3569 47.6256L84.9784 65.1085C85 65.285 84.9893 65.464 84.9467 65.6367Z"
			fill="black"
		/>
		<path
			d="M66.1856 54.9141H71.8319L70.3266 71.0924L79.2582 72.4287V73.559H60.4442V72.4287L64.3 71.0924L66.1856 54.9141Z"
			fill="#263238"
		/>
		<path
			opacity="0.1"
			d="M71.8319 54.9141L67.6487 73.3002L64.3 73.1998L66.1856 54.9141H71.8319Z"
			fill="white"
		/>
		<path
			d="M98.1355 68.3198V68.6843L96.8626 69.1913H98.1355V70.0628H97.0369L95.8801 70.8234H96.7464L95.5896 71.4942H96.7464V73.2214L117.256 73.2319V72.2654L118.027 71.4942H117.087V69.3392H118.766V68.6156H119.601V68.3198H98.1355Z"
			fill="#315CEC"
		/>
		<path
			opacity="0.9"
			d="M98.1355 68.3198V68.6843L96.8626 69.1913H98.1355V70.0628H97.0369L95.8801 70.8234H96.7464L95.5896 71.4942H96.7464V73.2214L117.256 73.2319V72.2654L118.027 71.4942H117.087V69.3392H118.766V68.6156H119.601V68.3198H98.1355Z"
			fill="white"
		/>
		<path
			opacity="0.1"
			d="M98.1355 68.3198V68.6843L96.8626 69.1913H98.1355V70.0628H97.0369L95.8801 70.8234H96.7464L95.5896 71.4942H96.7464V73.2214L107.912 73.2319V72.2654L108.683 71.4942H107.743V69.3392H109.423V68.6156H110.257V68.3198H98.1355Z"
			fill="black"
		/>
		<path
			opacity="0.1"
			d="M117.087 69.3389H107.743L107.701 69.9885L117.087 69.3389Z"
			fill="black"
		/>
		<path opacity="0.1" d="M118.766 68.6152H109.423L118.766 68.9374V68.6152Z" fill="black" />
		<path opacity="0.1" d="M117.087 71.4942H107.743L117.087 71.1509V71.4942Z" fill="black" />
		<path opacity="0.1" d="M117.256 72.2651H107.912V72.6243L117.256 72.2651Z" fill="black" />
		<path
			opacity="0.1"
			d="M98.1355 68.6841L107.743 68.6154L98.1355 68.3936V68.6841Z"
			fill="black"
		/>
		<path opacity="0.1" d="M98.1355 69.1909H107.912L98.1355 69.5184V69.1909Z" fill="black" />
		<path opacity="0.1" d="M96.7464 70.8232H107.595V71.1507L96.7464 70.8232Z" fill="black" />
		<path opacity="0.1" d="M96.7464 71.4941H104.606L96.7464 71.7107V71.4941Z" fill="black" />
		<path
			d="M82.6491 154.995H79.5223L73.8971 76.7441H78.0486L82.6491 154.995Z"
			fill="#EBB376"
		/>
		<path
			opacity="0.1"
			d="M82.6491 154.995H79.5223L74.1717 80.6318L73.8971 76.8711H78.0486L78.2757 80.6318L82.6491 154.995Z"
			fill="white"
		/>
		<path
			opacity="0.2"
			d="M78.2757 80.4416H74.1717L73.8971 76.8711H78.0486L78.2757 80.4416Z"
			fill="black"
		/>
		<path
			d="M105.604 154.995H102.477L101.965 76.7441H106.116L105.604 154.995Z"
			fill="#EBB376"
		/>
		<path
			opacity="0.1"
			d="M106.116 76.8711L106.037 89.4947L105.609 154.995H102.477L102.049 89.4947L101.97 76.8711H106.116Z"
			fill="white"
		/>
		<path
			opacity="0.2"
			d="M106.116 76.8711L106.037 89.632H102.049L101.97 76.8711H106.116Z"
			fill="black"
		/>
		<path d="M138.816 154.995H135.689L130.07 76.7441H134.221L138.816 154.995Z" fill="#EBB376" />
		<path
			opacity="0.1"
			d="M138.822 154.995H135.689L130.344 80.6318L130.07 76.8711H134.221L134.443 80.6318L138.822 154.995Z"
			fill="white"
		/>
		<path
			opacity="0.2"
			d="M134.443 80.4416H130.344L130.07 76.8711H134.221L134.443 80.4416Z"
			fill="black"
		/>
		<path
			d="M46.8593 154.995H43.7325L48.3329 76.7441H52.4792L46.8593 154.995Z"
			fill="#EBB376"
		/>
		<path
			opacity="0.1"
			d="M52.4792 76.8711L52.2045 80.6318L46.8593 154.995H43.7325L48.1058 80.6318L48.3277 76.8711H52.4792Z"
			fill="white"
		/>
		<path
			opacity="0.2"
			d="M48.3277 76.8711H52.4792L52.2045 80.4416H48.1058L48.3277 76.8711Z"
			fill="black"
		/>
		<path
			d="M45.0265 74.7846H137.512V77.5628C137.512 77.8654 137.391 78.1556 137.177 78.3695C136.964 78.5835 136.673 78.7037 136.371 78.7037H46.1832C46.0316 78.7058 45.8811 78.6777 45.7405 78.621C45.5999 78.5642 45.4721 78.4801 45.3644 78.3733C45.2567 78.2666 45.1713 78.1395 45.1133 77.9995C45.0553 77.8594 45.0258 77.7091 45.0265 77.5575V74.7793V74.7846Z"
			fill="#315CEC"
		/>
		<path
			opacity="0.4"
			d="M45.0265 74.7846H137.512V77.5628C137.512 77.8654 137.391 78.1556 137.177 78.3695C136.964 78.5835 136.673 78.7037 136.371 78.7037H46.1832C46.0316 78.7058 45.8811 78.6777 45.7405 78.621C45.5999 78.5642 45.4721 78.4801 45.3644 78.3733C45.2567 78.2666 45.1713 78.1395 45.1133 77.9995C45.0553 77.8594 45.0258 77.7091 45.0265 77.5575V74.7793V74.7846Z"
			fill="white"
		/>
		<path opacity="0.2" d="M137.512 74.7847H45.0424V76.7442H137.512V74.7847Z" fill="black" />
		<path
			d="M139.45 75.2918H43.1039C42.9588 75.2925 42.8149 75.2644 42.6806 75.2092C42.5464 75.154 42.4244 75.0727 42.3218 74.97C42.2191 74.8674 42.1378 74.7454 42.0826 74.6112C42.0274 74.4769 41.9993 74.3331 42 74.1879C42 73.8951 42.1163 73.6143 42.3233 73.4073C42.5304 73.2003 42.8111 73.084 43.1039 73.084H139.45C139.742 73.0854 140.022 73.2021 140.229 73.4088C140.436 73.6156 140.553 73.8955 140.554 74.1879C140.554 74.4807 140.438 74.7615 140.231 74.9685C140.024 75.1755 139.743 75.2918 139.45 75.2918Z"
			fill="#315CEC"
		/>
		<path
			opacity="0.4"
			d="M139.45 75.2918H43.1039C42.9588 75.2925 42.8149 75.2644 42.6806 75.2092C42.5464 75.154 42.4244 75.0727 42.3218 74.97C42.2191 74.8674 42.1378 74.7454 42.0826 74.6112C42.0274 74.4769 41.9993 74.3331 42 74.1879C42 73.8951 42.1163 73.6143 42.3233 73.4073C42.5304 73.2003 42.8111 73.084 43.1039 73.084H139.45C139.742 73.0854 140.022 73.2021 140.229 73.4088C140.436 73.6156 140.553 73.8955 140.554 74.1879C140.554 74.4807 140.438 74.7615 140.231 74.9685C140.024 75.1755 139.743 75.2918 139.45 75.2918Z"
			fill="white"
		/>
	</svg>
)

const useStyles = createStyles(({ css, token }) => ({
	text: css`
		color: ${token.colorTextQuaternary};
		text-align: center;
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
	`,
}))

const OrganizationPanelEmpty = memo(() => {
	const { t } = useTranslation("interface")
	const { styles } = useStyles()

	return (
		<Flex vertical align="center" justify="center" gap={4}>
			{Logo}
			<span className={styles.text}>{t("contacts.organization.noOrganizationOrMember")}</span>
		</Flex>
	)
})

export default OrganizationPanelEmpty
